<template>
  <div class="score-container nav-bar-top">
    <!-- 导航栏 -->
    <van-nav-bar class="nav-bar" title="积分商城" left-arrow @click-left="$router.back()"/>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">
      <van-grid :column-num="2" class="goods-box" :border="false">
        <van-grid-item class="goods" v-for="(goods, index) in goodsList" :key="index">
          <div slot="default">
            <goodsItem></goodsItem>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import goodsItem from '@/components/goods/goodsItem'

export default {
  components: {
    goodsItem
  },
  name: 'score',
  data () {
    return {
      loading: false,
      finished: false,
      goodsList: []
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.goodsList.push({});
        }
    
        // 加载状态结束
        this.loading = false;
    
        // 数据全部加载完成
        if (this.goodsList.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    }
  }
}
</script>

<style lang="scss">
.score-container{
  .goods-box{
    padding: 0 5px;
    .goods{
      margin-bottom: 10px;
      .van-grid-item__content--center{
        padding: 0px;
        margin: 5px 5px;
        border-radius: 5px;
      }
    }
  }
}  
</style>
